<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <meta name="author" content="林镭特" />
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
      .box {
        display: inline-block;
        cursor: pointer;
      }

      .box1 {
        margin: 0 6px 0 0;
        width: 20px;
        height: 20px;
        font-weight: 700;
        background-image: url("./img/s2.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <my-star v-model="value"></my-star>
    </div>

    <script type="text/html" id="my-star">
      <div @mouseleave="seleave">
          <div class="box" v-for="num in 5"  :index="num" @mouseover="enter(num)" @click="click(num)" ref="items">
              <div class="box1" :style="showstar!=null?(num<=showstar?image:''):(num<=value?image:'')" :info="showstar"></div>
          </div>
      </div>
    </script>
    <script>
      Vue.component("my-star", {
        template: "#my-star",
        props: {
          value: {
            type: Number,
          },
        },
        data() {
          return {
            showstar: null,
          };
        },
        methods: {
          //鼠标移入显示星星
          enter(num) {
            this.showstar = num;
          },
          //鼠标点击发送
          click(num) {
            this.$emit("input", num);
          },
          //鼠标离开
          seleave() {
            this.showstar = null;
          },
        },
        computed: {
          image() {
            return {
              backgroundImage: 'url("./img/s1.png")',
            };
          },
        },
        watch: {},
      });

      let app = new Vue({
        el: "#app",
        data: {
          value: null,
        },
      });
    </script>
  </body>
</html>
